<template>
    <Modal :mask-closable="false" v-model="showFansupdate" @on-cancel="handleCancel" width="400" title="粉丝更新" :footer-hide=true :draggable="true">
         <Form ref="fansupdate" :model="fansInfo" :rules="rules" :label-width="100">         
            <FormItem label="当前粉丝数" prop="fans_num" required>
                <InputNumber v-model="fansInfo.fans_num" :min="0" placeholder="当前粉丝数" style="width:100%"/>
            </FormItem>         
            <Divider /> 
            <h3 class="ivu-mb-16">更新记录</h3>
            <Scroll
                :on-reach-bottom="handleReachBottom"
                :height="300"
                :distance-to-edge="[1, 1]"
                class="ivu-mb-16"
            >
                <p class="ivu-text-center" v-if="list.length==0">暂无数据~</p>
                <Timeline>
                    <TimelineItem v-for="item in list" :key="item.id">
                        <p class="time">{{item.update_date}}</p>
                        <p class="content">
                            粉丝数：{{item.fans_num}} 
                            <span v-if="item.rate>0" style="color:#ed4014;">
                                <Icon type="ios-arrow-round-up" :size="20"/>
                                {{item.rate}}
                            </span>
                            <span v-if="item.rate<0" style="color:#19be6b;">
                                <Icon type="ios-arrow-round-down" :size="20"/>
                                {{Math.abs(item.rate)}}
                            </span>
                        </p>
                        <p>更新人：{{item.operation_name}}</p>
                    </TimelineItem>
                </Timeline> 
                <p class="ivu-text-center" v-if="showLast">到底啦~</p>
            </Scroll> 
        </Form>
        <div slot="footer" style="text-align:right;">
            <Button type="default" @click="handleCancel" >取消</Button>
            <Button type="primary" @click="ok" style="margin-left:10px;">确定</Button>
        </div>
    </Modal>
</template>  
<script>
import {accountsupdateFans,accountFansList} from '@api/accountnumber.js'
    
    export default {
        name: 'fansupdate',
        props:["showFansupdate","accountId"],
        data () {
            return {
                fansInfo:{
                    fans_num:null
                },
                params:{id:'',current:1,size:3},
                rules: {
                    fans_num: [
                        { required: true, message: '请输入粉丝数' }
                    ],
                },
                list:[],
                total:0,
                showLast:false
            }
        },
        watch:{
            showFansupdate(){
                if(this.showFansupdate){
                    this.params={id:this.accountId,current:1,size:10},
                    this.$refs.fansupdate.resetFields();
                    this.showLast=false 
                    this.getData()
                }
            }
        },
        methods:{
            handleReachBottom() {
                if (this.total > this.list.length) {
                    return new Promise((resolve) => {
                        this.params.current++;
                        this.getMore();
                        resolve();
                    });
                } else if (this.total >= 1) {
                    this.showLast = true;
                }
            },
            getData(){
                let params={
                    id:this.params.id,
                    page:this.params.current,
                    pageSize:this.params.size
                }
                accountFansList(params).then(res=>{
                    this.list=res.list
                    this.total=res.total
                })
            },
            getMore(){
                let params={
                    id:this.params.id,
                    page:this.params.current,
                    pageSize:this.params.size
                }
                accountFansList(params).then(res=>{
                    this.list=this.list.concat(res.list);
                    this.total=res.total
                })
            },
            handleCancel(){
                this.$emit('closefans',false)
            },
            addFans(){
                let params={
                    id:this.accountId,
                    fans_num:this.fansInfo.fans_num
                }
               accountsupdateFans(params).then(()=>{
                   this.$Message.success('更新成功')
                   this.$emit('closefans',false,'update')   
               })
            },
            ok(){
                this.$refs.fansupdate.validate(valid => {
                    if(valid) {
                        this.addFans()                        
                    }
                })
            }
        }
    } 
</script>
<style lang="less" scoped>
    .content{
        margin: 10px 0;
        font-size: 15px;
        color: #333;
    }
</style>